<script setup lang="tsx">
import type { GlobalThemeOverrides } from 'naive-ui'
import { computed, ref } from 'vue'
// import { WLoading } from '@na/components';
import LayoutBase from '@/layout/base.vue'
// import { VueRepl } from '@na/repl';
import { useApp } from '@/themes'
import WProvider from '@/components/common/w-provider.vue'

const { tokenLocale, tokenTheme, store, isDark } = useApp()
const themeOverrides = computed((): GlobalThemeOverrides => {
  return {
    common: {
      primaryColor: '#2080f0',
      primaryColorHover: '#4098fc',
      primaryColorPressed: '#1060c9',
      primaryColorSuppl: '#4098fc',
      infoColor: '#c22efd',
      infoColorHover: '#c63efc',
      infoColorPressed: '#8f05c5',
      infoColorSuppl: '#c63efc',
    },
  }
})
const appStyle = computed(() => {
  const { headerHeight, asideWidth, asideCollapseWidth } = store.value
  return {
    '--header-height': `${headerHeight}px`,
    '--aside-width': `${asideWidth + asideCollapseWidth}px`,
  }
})
const iconName = ref('local:home')
const lang = ref('html')
// const code = ref(appCode)
const editCode = ref(`<p>测试122678899911111119</p>`)
</script>

<template>
  <n-config-provider class="app-provider" :locale="tokenLocale" :theme="tokenTheme" :theme-overrides="themeOverrides" :style="appStyle">
    <w-provider>
      <layout-base>
        <div style="height: 1500px">
          <n-card>
            <n-form-item>
              <n-input-group style="width: 300px">
                <!--                <n-input v-model:value="iconName"></n-input>-->
                <n-popover trigger="click" placement="bottom-start">
                  <template #trigger>
                    <n-input-group class="w-300px">
                      <n-input-group-label v-if="iconName" class="flex-center">
                        <n-icon size="24"><svg-icon :icon="iconName"></svg-icon></n-icon>
                      </n-input-group-label>
                      <n-input v-model:value="iconName" placeholder="请输入图标名称" clearable></n-input>
                    </n-input-group>
                  </template>
                  <icon-panel v-model="iconName"></icon-panel>
                </n-popover>
              </n-input-group>
            </n-form-item>
          </n-card>
          <n-select
            v-model:value="lang"
            :options="[
              { label: 'html', value: 'html' },
              { label: 'php', value: 'php' },
            ]"
          ></n-select>
          <code-editor v-model="editCode" :language="lang"></code-editor>
          <!--          <MarkdownEditor></MarkdownEditor>-->
          <!--          <w-markdown></w-markdown>-->
        </div>
      </layout-base>
    </w-provider>
  </n-config-provider>
</template>

<style lang="scss" scoped>
.app-provider {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>
